<template>
  <div style="margin-top: 60px;border: 0 solid red;">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"
             class="demo-ruleForm">
      <el-form-item label="搜索范围:" prop="key">
        <el-select v-model="ruleForm.key" style="width: 160px;float: left" placeholder="请选择字段">
          <el-option label="ID" value="request_id"></el-option>
          <el-option label="公寓号" value="dormitoryName"></el-option>
          <el-option label="维修状态" value="status"></el-option>
          <el-option label="申请人" value="applicantName"></el-option>
          <el-option label="申请人电话" value="applicantTelephone"></el-option>
          <el-option label="维修人员姓名" value="repairPersonnelName"></el-option>
          <el-option label="维修人员电话" value="repairPersonnelTelephone"></el-option>
          <el-option label="开始时间" value="startTime"></el-option>
          <el-option label="结束时间" value="endTime"></el-option>
          <el-option label="维修备注" value="remarks"></el-option>
        </el-select>
      </el-form-item>
      <div style="border: 0 solid red;width: 400px;height: 60px;position: relative;top: -64px;left: 270px">
        <el-form-item label="搜索内容:">
          <el-input v-model="ruleForm.value" placeholder="请输入关键字" style="width: 160px;"></el-input>
          <el-button type="primary" icon="el-icon-search" style="position: relative;left: 10px;"
                     @click="submitForm('ruleForm')">搜索
          </el-button>
        </el-form-item>
      </div>
    </el-form>

    <el-table
        :data="tableData"
        border
        stripe
        style="width: 100%;position: relative;top:-30px">
      <el-table-column
          fixed
          align="center"
          sortable
          prop="id"
          label="ID"
          width="50">
      </el-table-column>
      <el-table-column
          align="center"
          prop="dormitoryName"
          label="公寓号">
      </el-table-column>
      <el-table-column
          align="center"
          prop="status"
          label="维修状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === '待处理'" type="warning">待处理</el-tag>
          <el-tag v-else-if="scope.row.status === '处理中'" type="primary">处理中</el-tag>
          <el-tag v-else-if="scope.row.status === '已完成'" type="success">已完成</el-tag>
        </template>
      </el-table-column>

      <el-table-column
          align="center"
          prop="applicantStudentName"
          label="申请人">
      </el-table-column>
      <el-table-column
          align="center"
          prop="applicantStudentTelephone"
          label="申请人电话">
      </el-table-column>
      <el-table-column
          align="center"
          prop="repairPersonnelName"
          label="维修人员姓名">
      </el-table-column>
      <el-table-column
          align="center"
          prop="repairPersonnelTelephone"
          label="维修人员电话">
      </el-table-column>
      <el-table-column
          align="center"
          prop="startTime"
          width="110" sortable
          label="开始时间">
        <template slot-scope="scope">
          {{ scope.row.startTime | formatDateTime }}
        </template>
      </el-table-column>
      <el-table-column
          align="center"
          prop="endTime"
          width="110" sortable
          label="结束时间">
        <template slot-scope="scope">
          {{ scope.row.endTime | formatDateTime }}
        </template>
      </el-table-column>
      <el-table-column
          align="center"
          prop="remarks"
          label="维修备注">
      </el-table-column>
    </el-table>

    <el-pagination style="margin-top: 20px;float: right"
                   background
                   layout="prev, pager, next"
                   :page-size="pageSize"
                   :total="total"
                   :current-page.sync="currentPage"
                   @current-change="page">
    </el-pagination>
  </div>

</template>

<script>
import {formatDate} from "element-ui/src/utils/date-util";

export default {
  data() {
    return {
      tableData: null,
      currentPage: 1,
      pageSize: 5,
      total: '',
      key: '',
      value: '',
      ruleForm: {
        key: '',
        value: '',
        page: '',
        size: 3
      },
      rules: {
        key: [
          {required: true, message: '请选择字段', trigger: 'change'}
        ]
      }
    }
  },
  methods: {
    formatDate(dateTime) {
      return moment(dateTime).format('YYYY-MM-DD HH:mm:ss');
    },
    submitForm(formName) {
      const _this = this
      //让翻页复原
      _this.currentPage = 1
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const _this = this
          _this.ruleForm.page = _this.currentPage
          axios.get('http://localhost:9090/maintenance/search', {params: _this.ruleForm}).then(function (resp) {
            _this.tableData = resp.data.data.data
            _this.total = resp.data.data.total
          })
        }
      });
    },
    page(currentPage) {
      const _this = this
      if (_this.ruleForm.value === '') {
        axios.get('http://localhost:9090/maintenance/listByStudentId/'+_this.currentUserId+ '/' + currentPage + '/' + _this.pageSize).then(function (resp) {
          _this.tableData = resp.data.data.data
          _this.total = resp.data.data.total
        })
      } else {
        _this.ruleForm.page = _this.currentPage
        axios.get('http://localhost:9090/maintenance/search', {params: _this.ruleForm}).then(function (resp) {
          _this.tableData = resp.data.data.data
          _this.total = resp.data.data.total
        })
      }
    },
    edit(row) {
      this.$router.push('/maintenanceUpdate?id=' + row.id)
    },
    del(row) {
      const _this = this
      this.$confirm('确认删除【' + row.id + '】吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.delete('http://localhost:9090/maintenance/deleteById/' + row.id).then(function (resp) {
          if (resp.data.code === 0) {
            _this.$alert('【' + row.username + '】已删除', '', {
              confirmButtonText: '确定',
              callback: action => {
                location.reload()
              }
            });
          }
        });
      });
    }
  },
  created() {
    const _this = this
    axios.get('http://localhost:9090/maintenance/listByStudentId/'+_this.currentUserId +'/1/'+ _this.pageSize).then(function (resp) {
      _this.tableData = resp.data.data.data
      _this.total = resp.data.data.total
    })
  },
  filters: {
    formatDateTime(dateTime) {
      if (!dateTime) {
        return ''; // 或者其他你想要显示的默认值
      }
      const options = {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
      };
      return new Date(dateTime).toLocaleDateString('zh-CN', options).replace(/\//g, '-');
    },
  },
  computed: {
    currentUserId() {
      // 假设在 Vuex 中有一个名为 currentUser 的模块，包含用户信息
      return this.$store.state.student.id;
    }
  }
}
</script>